
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Modal, Select, message } from 'antd';
import { publishMessage, editMessage } from '@/api/message/index';


const MessageDialog = ({ visible, formData, title, onClose, onSuccess }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (!visible) return
    const name = JSON.parse(localStorage.getItem('userInfo')).name || ''
    if (title === '编辑公告' || title === '编辑系统消息') {
      form.setFieldsValue({
        ...formData,
        message_publish_name: name
      })
    } else {
      form.setFieldsValue({
        message_publish_name: name
      })
    }
    console.log(name)
  }, [visible]);

  const handleSubmit = async () => {
    const values = await form.validateFields();
    let res;
    if (title === '发布公告') {
      res = await publishMessage({ ...formData, ...values, message_category: '公司公告' });
    } else if (title === '编辑公告') {
      res = await editMessage({ ...formData, ...values, message_category: '公司公告' });
    } else if (title === '发布系统消息') {
      res = await publishMessage({ ...formData, ...values, message_category: '系统消息' });
    } else if (title === '编辑系统消息') {
      res = await editMessage({ ...formData, ...values, message_category: '系统消息' });
    }
    if (res.status === 0) {
      // await changeUserReadList(res.id, formData.message_receipt_object);
      // msgStore.returnReadList(localStorage.getItem('id'));
      message.success(`${title}成功`);
      onSuccess();
      onClose();
    } else {
      message.error(`${title}失败`);
      onClose();
    }
    form.resetFields();
  };


  return (
    <Modal
      open={visible}
      title={title}
      onCancel={onClose}
      onOk={handleSubmit}
      width="50%"
      destroyOnClose
    >
      <Form form={form} layout="vertical">
        <Form.Item
          label="主题"
          name="message_title"
          rules={[{ required: true, message: '请输入公告标题' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="发布部门"
          name="message_publish_department"
          rules={[{ required: true, message: '请选择发布部门' }]}
        >
          <Select
            options={[
              { value: '产品部', label: '产品部' },
              { value: '用户部', label: '用户部' },
            ]}
          />
        </Form.Item>

        <Form.Item
          label="发布人"
          name="message_publish_name"
          rules={[{ required: true, message: '请输入发布人' }]}
        >
          <Input disabled />
        </Form.Item>

        <Form.Item
          label="接收部门"
          name="message_receipt_object"
          rules={[{ required: true, message: '请选择接收部门' }]}
        >
          <Select
            options={[
              { value: '产品部', label: '产品部' },
              { value: '用户部', label: '用户部' },
            ]}
          />
        </Form.Item>

        <Form.Item
          label="公告等级"
          name="message_level"
          rules={[{ required: true, message: '请选择公告等级' }]}
        >
          <Select options={[
            {
              value: '一般',
              label: '一般'
            },
            {
              value: '重要',
              label: '重要'
            },
            {
              value: '必要',
              label: '必要'
            }
          ]} />
        </Form.Item>
        <Form.Item
          label="内容"
          name="message_content"
          rules={[{ required: true, message: '请输入公告内容' }]}
        >
          <Input.TextArea />
        </Form.Item>
      </Form>
    </Modal>
  );
};

MessageDialog.propTypes = {
  visible: PropTypes.bool.isRequired,
  formData: PropTypes.object.isRequired,
  title: PropTypes.string.isRequired,
  onClose: PropTypes.func.isRequired,
  onSuccess: PropTypes.func.isRequired,
};


export default MessageDialog;
